@keyframes wcfPageAction {
	0%   { visibility: visible; transform: translateY(-10px); opacity: 0; }
	100% { visibility: visible; transform: translateY(0);     opacity: 1; }
}

@keyframes wcfPageActionOut {
	0%   { visibility: visible; transform: translateY(0);     opacity: 1; }
	100% { visibility: hidden;  transform: translateY(-10px); opacity: 0; }
}

@keyframes wcfPageActionRemove {
	0%   { visibility: visible; transform: translateY(0);     opacity: 1; }
	60%  { visibility: hidden;  transform: translateY(-10px); opacity: 0; }
	100% { visibility: hidden;  transform: translateY(-10px); opacity: 0; max-width: 0; }
}

.pageAction {
	bottom: 10px;
	position: fixed;
	right: 10px;
	z-index: 400;
	
	@include inlineList;
	
	> li {
		animation: wcfPageActionOut .3s;
		animation-fill-mode: forwards;
		display: flex;
		
		// required to animate 'max-width' properly when removing items
		max-width: 400px;
		white-space: nowrap;
		
		&[aria-hidden="false"] {
			animation: wcfPageAction .3s;
			animation-fill-mode: forwards;
		}
		
		&.remove {
			animation: wcfPageActionRemove .5s;
			animation-fill-mode: forwards;
		}
		
		&.initiallyHidden {
			animation: 0;
			visibility: hidden;
		}
		
		&.toTop > a {
			padding: 2px;
		}
	}
	
	@include screen-xs {
		flex-wrap: nowrap;
		left: 10px;
		
		> li {
			flex: 1 1 auto;
			max-width: none;
			overflow: hidden;
			
			> a {
				overflow: hidden;
				text-align: center;
				text-overflow: ellipsis;
				width: 100%;
			}
		}
	}
}

.pageOverlayActive .pageAction {
	display: none;
}

@include screen-xs {
	.redactorActive .pageAction {
		display: none !important;
	}
}
